<template>
  <div class="kpi" :class="(abnormalQuestion&&plans)?'h1':'h2'">
    <div class="todo-header">
      <div class="item-1">
        序号
      </div>
      <div class="item-3">
        员工姓名
      </div>
      <div class="item-4">
        部门
      </div>
      <div class="item-2">
        所属工序
      </div>
      <div class="item-3">
        考勤日期
      </div>
      <div class="item-4">
        完成数量
      </div>
      <div class="item-1">
        合格率
      </div>
    </div>
    <a-carousel :autoplay="true" dot-position="right" dots="false" :slides-to-show="num" :slides-to-scroll="1" id="carousel" class="todo-list">
      <div class="todo-item" v-for="(item,index) in achievementList" :key="index">
        <div class="item-1">
          {{ index + 1 }}
        </div>
        <div class="item-3">
          <TableTootip :content="item.userName"></TableTootip>
        </div>
        <div class="item-4">
          <TableTootip :content="item.organizationName"></TableTootip>
        </div>
        <div class="item-2" ref="workingProcedure">
          <TableTootip :content="item.workingProcedureName"></TableTootip>
        </div>
        <div class="item-3">
          <TableTootip :content="item.attendanceDatetime"></TableTootip>
        </div>
        <div class="item-4">
          {{item.yield}}
        </div>
        <div class="item-1">
          {{ item.yieldScore }}
        </div>
      </div>
    </a-carousel>
    <div class="nodata" v-if="!achievementList.length">暂无数据</div>
  </div>
</template>
<script>
import {req} from "../../../api/axiosFun";
import TableTootip from "../../../components/TableTootipHome";

export default {
  props:['abnormalQuestion','plans'],
  components:{
    TableTootip
  },
  data() {
    return{
      achievementList:[],
      textWidth:0,
      num: 4
    }
  },
  mounted() {
    this.getKPIranking()
  },
  methods:{
    //当月员工KPI考勤排名
    getKPIranking() {
      req('post', `dataBoard/getKPIranking`)
        .then(res => {
          if (res.result === 'success') {
            this.achievementList = res.data
            if(this.abnormalQuestion&&this.plans){
              this.num = this.achievementList.length<10?this.achievementList.length:10
            }else {
              this.num = this.achievementList.length<4?this.achievementList.length:4
            }
            if(this.achievementList.length) {
              this.$nextTick(() => {
                if(this.$refs.workingProcedure){
                  this.textWidth = this.$refs.workingProcedure[0].offsetWidth
                }
              })
            }
          }
        })
    },
  }
}
</script>
<style scoped>
@import "../../../assets/css/maincss.css";
.kpi {
  position: relative;
  overflow-y: hidden;
}
.todo-item,.todo-header {
  display: flex!important;
  line-height: 45px;
  font-size: 14px;
  border-bottom: 1px solid #e8e8e8;
}
.todo-header {
  margin-top: 10px;
  background-color: #f1f2f5;
}
.item-1 {
  width: 11%;
  padding-left: 5px;
}
.item-4,.item-5 {
  width: 16%;
}
.item-2 {
  width: 28%;
  padding-left: 10px;
  padding-right: 10px;
}
.item-3 {
  width: 18%;
}
.h1{
  height: 540px;
}
.h2{
  height: 230px;
}
@media screen and (max-width: 1440px) {
  .todo-item,.todo-header{
    font-size: 12px;
  }
}
</style>
